<template>
    <div class="homes">
        <mLoading :showLoading="showLoading"></mLoading>
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft">
            <template #right>
                <div class="nav-right" @click="pickDate">{{date.showDate}}</div>
            </template>
        </van-nav-bar>
        <div class="card-box">
            <div class="item-box" v-for="(item, index) in listData" :key="index">
                <div class="area-title">{{item.areaName}}</div>
                <!-- <div class="progress-bar">
                <van-progress :pivot-text="item.kpiValue" :color="item.areaId == 9999 ? '#4A7F37' : '#087DE0'" :percentage="item.kpiValue" stroke-width="30px" />
            </div> -->
                <div :class="item.areaId == 9999 ?'area-all-bar' :  'area-bar'" :style="'width:'+ widths[index] + 'px'">
                    {{item.kpiValue + '%'}}
                </div>
                <!-- <div class="area-title">{{item.kpiValue + '%'}}</div> -->
            </div>
        </div>
        <div class="circle" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end" ref="divDom">
            <circleEcharts :index="2" />
        </div>
        <van-popup v-model:show="showPicker" position="bottom">
            <!-- <van-datetime-picker
                v-model="date"
                type="date"
                title="选择时间"
                :min-date="startDate"
                :max-date="endDate"
                :formatter="formatter"
                @cancel="cancel" @confirm="confirm" 
                /> -->
            <van-datetime-picker v-model="date.currentDate" type="date" :min-date="startDate" :max-date="endDate" @cancel="cancel" @confirm="confirm" />

        </van-popup>
    </div>
</template>

<script>
import { Toast } from "vant"
import "@/api/index"
import { mapGetters } from "vuex"
import { ref, reactive, toRefs, onMounted, watch } from "vue"
import { useRouter } from "vue-router" //1.引入useRoute
import { useStore } from "vuex"
import GetNetUtil from "@/utils/GetNetUtil"
import circleEcharts from "@/components/circleEcharts.vue"
import mLoading from "@/components/mLoading.vue"
export default {
    components: {
        circleEcharts,
        mLoading
    },
    setup() {
        const router = useRouter()
        const state = reactive({
            params: {
                token: "",
                user4a: "",
                type: "",
                dayCode: "",
                kpiCode: ""
            },
            showLoading: false,
            startDate: new Date(2020, 0, 1),
            endDate: new Date(2025, 10, 1),
            date: {
                showDate: "",
                currentDate: ""
            },
            title: "",
            showPicker: false,
            widths: [], //各个bar的宽度
            listData: "",
            firstItem: {},
            lastItem: {},
            flags: false, //控制使用
            position: {
                x: 0,
                y: 0
            },
            nx: "",
            ny: "",
            dx: "",
            dy: "",
            xPum: "",
            yPum: ""
        })
        const divDom = ref(null)
        function down(event) {
            state.flags = true
            var touch
            if (event.touches) {
                touch = event.touches[0]
            } else {
                touch = event
            }
            state.position.x = touch.clientX
            state.position.y = touch.clientY
            state.dx = divDom.value.offsetLeft
            state.dy = divDom.value.offsetTop
        }
        function move(event) {
            if (state.flags) {
                var touch
                if (event.touches) {
                    touch = event.touches[0]
                } else {
                    touch = event
                }
                state.nx = touch.clientX - state.position.x
                state.ny = touch.clientY - state.position.y
                state.xPum = state.dx + state.nx
                state.yPum = state.dy + state.ny
                let width = window.innerWidth - divDom.value.offsetWidth //屏幕宽度减去自身控件宽度
                let height = window.innerHeight - divDom.value.offsetHeight //屏幕高度减去自身控件高度
                state.xPum < 0 && (state.xPum = 0)
                state.yPum < 0 && (state.yPum = 0)
                state.xPum > width && (state.xPum = width)
                state.yPum > height && (state.yPum = height)
                // if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
                divDom.value.style.left = state.xPum + "px"
                divDom.value.style.top = state.yPum + "px"
                // }
                //阻止页面的滑动默认事件
                document.addEventListener(
                    "touchmove",
                    function () {
                        // event.preventDefault()
                    },
                    false
                )
            }
        }
        /**
         * item:需要计算的item
         * index：需要计算的index
         * firstItem：数组第一个元素
         * lastItem：数组最后一个元素
         * length：数组长度
         */
        function getWidth(item, index, firstItem, lastItem, length) {
            let width = window.innerWidth
            let marginX =
                length > 17
                    ? 0
                    : firstItem.kpiValue - lastItem.kpiValue > 30
                    ? 0
                    : 10
            let viewW =
                (item.kpiValue / firstItem.kpiValue) *
                (width - 130 - index * marginX) // 防止数值差距较小，柱状图差距不明显
            return viewW
        }
        //鼠标释放时候的函数
        function end() {
            state.flags = false
        }
        function pickDate() {
            state.showPicker = true
        }
        //请求接口
        function requestHolidayQ2List() {
            state.showLoading = true
            const params = state.params
            GetNetUtil.requestPost(
                _const.holidayQ2ListDetailUrl,
                "",
                params,
                getList
            )
        }

        async function getList(result) {
            state.showLoading = false
            const data = result.data
            let firstItem = data[0]
            let lastItem = data[data.length - 1]
            state.firstItem = firstItem
            state.lastItem = lastItem
            state.listData = data
            //计算各个bar的宽度
            let widths = []
            for (let index = 0; index < data.length; index++) {
                const element = data[index]
                let width = getWidth(
                    element,
                    index,
                    firstItem,
                    lastItem,
                    data.length
                )
                widths.push(width)
            }
            state.widths = widths
        }

        function getParams() {
            console.log("_______")
            const params = router.currentRoute.value.params

            //  let params = JSON.parse(window.localStorage.getItem("q2Item"));
            //  state.params.token = store.getters.token
            //  state.params.user4a = store.getters.user4a
            state.params.token = params.token
            state.params.user4a = params.user4A
            state.params.dayCode = params.endDate
            state.params.kpiCode = params.kpiCode
            state.params.type = params.type
            state.startDate = new Date(_formatDate(params.startDate))
            state.endDate = new Date(_formatDate(params.endDate))
            state.date.currentDate = new Date(_formatDate(params.endDate))
            state.date.showDate = formatTitleDate(params.endDate)
            state.title = params.kpiName
            console.log(state.title)
        }

        const formatter = (type, val) => {
            if (type === "year") {
                return `${val}年`
            }
            if (type === "month") {
                return `${val}月`
            }
            if (type === "day") {
                return `${val}日`
            }
            return val
        }

        function _addZero(data) {
            if (data < 10) {
                return "0" + data
            } else {
                return data
            }
        }

        function _formatDate(date) {
            return (
                date.substr(0, 4) +
                "/" +
                date.substr(4, 2) +
                "/" +
                date.substr(6, 2)
            )
        }
        function formatTitleDate(date) {
            let month = date.substr(4, 2)
            let day = date.substr(6, 2)
            if (month.indexOf("0") === 0) {
                month = month.substr(1, 1)
            }
            if (day.indexOf("0") === 0) {
                day = day.substr(1, 1)
            }
            return date.substr(0, 4) + "年" + month + "月" + day + "日"
        }

        //事件处理部分
        function cancel() {
            state.showPicker = false
        }
        function confirm(val) {
            let currentDate = val
            let selectDate =
                currentDate.getFullYear() +
                "年" +
                (currentDate.getMonth() + 1) +
                "月" +
                currentDate.getDate() +
                "日"
            state.date.showDate = selectDate
            state.date.currentDate = currentDate
            state.showPicker = false
            state.params.dayCode =
                currentDate.getFullYear() +
                "" +
                _addZero(currentDate.getMonth() + 1) +
                "" +
                _addZero(currentDate.getDate())
            // store.commit("setDay", state.params.dayCode)
            requestHolidayQ2List()
        }
        const onClickLeft = () => history.back()
        onMounted(() => {
            getParams()
            requestHolidayQ2List()
        })
        return {
            ...toRefs(state),
            formatTitleDate,
            onClickLeft,
            pickDate,
            move,
            down,
            end,
            divDom,
            cancel,
            confirm,
            _addZero,
            getWidth
        }
    }
}
</script>


<style lang="scss" scoped>
.homes {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .card-box {
        background: #fff7d3;
        width: 100%;
        height: calc(100% - 44px);
        overflow: auto;
    }
    .card-box::-webkit-scrollbar {
        display: none;
    }
    .item-box {
        display: flex;
        //    flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 40px;
        .area-title {
            font-size: 14px;
            color: #427ce7;
            display: flex;
            align-items: center;
            justify-content: end;
            height: 40px;
            width: 64px;
            margin-left: 10px;
        }

        .progress-bar {
            // margin-left: 60px;
            height: 30px;
            width: 70%;
            // background: #087DE0;
            margin-right: 20px;
        }

        .area-bar {
            height: 20px;
            width: 80%;
            font-size: 14px;
            background: #427ce7;
            border-radius: 10px;
            margin: 15px;
            margin-left: 10px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .area-all-bar {
            height: 20px;
            width: 80%;
            font-size: 14px;
            border-radius: 10px;
            background: #4a7f37;
            margin: 15px;
            margin-left: 10px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
.circle {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 30px;
    right: 10px;
    z-index: 9999;
}
.nav-right {
    font-size: 10px;
    color: #ffffff;
}
::v-deep .van-nav-bar {
    background: #427ce7 !important;
}
</style>